<template>
<el-card class="card">
  <!-- 头部区域 -->
  <div class="top" >
    <el-row type="flex" class="row-bg" justify="space-between">
      <el-col :span="6"><span>说明：目前支持学科和关键字条件筛选</span></el-col>
      <el-col :span="8"></el-col>
      <el-col :span="2"><el-button @click="$router.push('/questions/new')" icon="el-icon-edit" type="success" >新增试题</el-button></el-col>
    </el-row>
  </div>
  <div class="form" >
   <el-form :model="query" ref="form" >
     <!-- 表单第一行 -->
     <el-row type="flex" >
       <el-col :span="6">
         <el-form-item label="学科" prop="" label-width="80px">
           <el-select v-model="query.subjectID" @change="chooseSubject()"  placeholder="请选择" style="width: 100%;">
            <el-option :label="obj.label" v-for="obj in subjectList" :key="obj.value" :value="obj.value"></el-option>

           </el-select>
         </el-form-item>
       </el-col>
       <el-col :span="6">
         <el-form-item label="二级目录" prop=""  label-width="80px" >
          <el-select v-model="query.catalogID" placeholder="请选择" style="width: 100%;">
            <el-option v-for="obj in twoLevelList" :key="obj.value" :label="obj.label" :value="obj.value"></el-option>
          </el-select>
         </el-form-item>
       </el-col>
       <el-col :span="6">
         <el-form-item label="标签" prop=""  label-width="80px">
          <el-select v-model="query.tags" placeholder="请选择" style="width: 100%;">
            <el-option v-for="obj in tagList" :key="obj.value" :label="obj.label" :value="obj.value"></el-option>
          </el-select>
         </el-form-item>
       </el-col>
       <el-col :span="6">
         <el-form-item label="关键字" prop=""  label-width="80px">
          <el-input v-model="query.keyword"></el-input>
         </el-form-item>
       </el-col>
     </el-row>
     <!-- 表单第二行 -->
     <el-row type="flex" >
       <el-col :span="6">
         <el-form-item label="试题类型" prop="" label-width="80px">
           <el-select v-model="query.questionType" placeholder="请选择" style="width: 100%;">
            <!-- <el-option label="单选" value="1"></el-option>
            <el-option label="多选" value="2"></el-option>
            <el-option label="简单" value="3"></el-option> -->
            <el-option v-for="obj in questionType" :key="obj.value"  :label="obj.label" :value="obj.value"></el-option>
           </el-select>
         </el-form-item>
       </el-col>
       <el-col :span="6">
         <el-form-item label="难度" prop=""  label-width="80px" >
          <el-select v-model="query.difficulty" placeholder="请选择" style="width: 100%;">
            <!-- <el-option label="简单" value="1"></el-option>
            <el-option label="一般" value="2"></el-option>
            <el-option label="困难" value="3"></el-option> -->
            <el-option v-for="obj in difficulty" :key="obj.value"  :label="obj.label" :value="obj.value"></el-option>
          </el-select>
         </el-form-item>
       </el-col>
       <el-col :span="6">
         <el-form-item label="方向" prop=""  label-width="80px">
          <el-select v-model="query.direction" placeholder="请选择" style="width: 100%;">
            <el-option v-for="(item,index) in direction" :key="index"  :label="item" :value="item"></el-option>
          </el-select>
         </el-form-item>
       </el-col>
       <el-col :span="6">
         <el-form-item label="录入人" prop=""  label-width="80px">
          <el-select v-model="query.creatorID" placeholder="请选择" style="width: 100%;">
            <el-option v-for="obj in usersList" :key="obj.id" :label="obj.username" :value="obj.id"></el-option>
          </el-select>
         </el-form-item>
       </el-col>
     </el-row>
     <!-- 表单第三行 -->
     <el-row type="flex" >
       <el-col :span="6">
         <el-form-item label="题目备注" prop="" label-width="80px">
            <el-input v-model="query.remarks"></el-input>
         </el-form-item>
       </el-col>
       <el-col :span="6">
         <el-form-item label="企业简称" prop=""  label-width="80px" >
            <el-input v-model="query.shortName"></el-input>
         </el-form-item>
       </el-col>
       <el-col :span="6" type="flex" >
         <el-form-item label="城市" prop=""  label-width="80px">
          <el-select v-model="query.province" @change="selectCity" style="width:50%" placeholder="请选择">
            <el-option v-for="(item,index) in provinceList" :key="index" :label="item" :value="item"></el-option>
          </el-select>
            <el-select v-model="query.city" style="width:50%" placeholder="请选择" >
            <el-option v-for="(item,index) in cityList" :key="index" :label="item" :value="item"></el-option>
          </el-select>
         </el-form-item>
       </el-col>
       <el-col :span="6" class="btn-form">
         <el-button @click="resetForm">清除</el-button>
         <el-button @click="searchFn" type="primary" >搜索</el-button>
       </el-col>
     </el-row>
   </el-form>
   <!-- 消息提示 -->
    <el-alert
    title="数据一共 7 条"
    type="info"
    show-icon>
  </el-alert>
  </div>
  <!-- 表格区域 -->
  <div class="table">
    <el-table
    class="table"
    :data="tableData"
    style="width: 100%"
    >
    <el-table-column
      fixed
      prop="number"
      label="试题编号"
      width="200">
    </el-table-column>
    <el-table-column
      prop="subjectID"
      label="学科"
      :formatter="formatterSub"
      width="150">
    </el-table-column>
    <el-table-column
      prop="catalog"
      label="目录"
      width="150">
    </el-table-column>
    <el-table-column
      prop="questionType"
      label="题型"
       :formatter="formatterType"
      width="150">
    </el-table-column>
    <el-table-column

      label="题干"
      width="500">
      <template v-slot="scope">
         <p  v-html="scope.row.question" ></p>
       </template>
    </el-table-column>
    <el-table-column
      prop="addDate"
      label="录入时间"
      :formatter="formatterTime"
      width="200">
    </el-table-column>
     <el-table-column
      prop="difficulty"
      label="难度"
       :formatter="formatterdiff"
      width="150">
    </el-table-column>
     <el-table-column
      prop="creator"
      label="录入人"
      width="150">
    </el-table-column>
     <el-table-column
      prop="addDate"
      label="操作"
      width="240">
      <template slot-scope="scope">
        <el-button @click="previewFn(scope.row.id)" type="primary" icon="el-icon-view" circle  plain></el-button>
        <el-button @click="editFn(scope.row.id)" type="success" icon="el-icon-edit" plain circle></el-button>
        <el-button @click="delFn(scope.row.id)" type="danger" icon="el-icon-delete"  plain circle></el-button>
        <el-button @click="choiceAddFn(scope.row.id)" type="warning"  icon="el-icon-check"  plain circle></el-button>
      </template>
    </el-table-column>

  </el-table>
  <div class="div-pagination">
     <!-- 分页 -->
   <el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[2,4,8,40]"
      :page-size="query.pagesize"
      layout="sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
   </div>
  </div>

  <!-- 弹窗 -->
  <el-dialog
  title="题目预览"
  :visible.sync="dialogVisible"
  width="50%"
  @close="closeFn">
  <questions-preview v-if="dialogVisible" :asdfghj="true" :questionId="questionId"  @close="closeFn"/>
  <!-- <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span> -->
</el-dialog>
</el-card>
</template>

<script>
import { simple } from '@/api/hmmm/subjects'
import { simple as subjectTwoLevel } from '@/api/hmmm/directorys'
import { simple as subjectTag } from '@/api/hmmm/tags'
import { simple as getUsers } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { list, remove, choiceAdd } from '@/api/hmmm/questions'
import dayjs from 'dayjs'
import questionsPreview from '../components/questions-preview.vue'

export default {
  name: 'question',
  components: {
    questionsPreview
  },
  data () {
    return {
      query: {
        subjectID: null,
        keyword: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null,
        remarks: null,
        shortName: null,
        province: null,
        city: null,
        catalogID: null,
        tags: null,
        page: 1,
        pagesize: 2
      },
      // 数据总数
      total: 0,
      currentPage4: 1,
      // 简单学科列表
      subjectList: [],
      // 二级目录
      twoLevelList: [],
      // 标签列表
      tagList: [],
      // 表格数据
      tableData: [
        {
          addDate: '2020-05-05T09:12:52.000Z',
          answer: '<p>无</p>',
          catalog: 'css基础',
          catalogID: 5,
          city: '和平区',
          creator: '超级管理员',
          creatorID: 2,
          difficulty: '1',
          direction: '企业服务',
          enterprise: '美团',
          enterpriseID: 12,
          id: 29,
          number: 'ck9tp300z0001kwo5hztbh95s',
          question: '<p>1+1等于几？</p>',
          questionType: '1',
          remarks: '无',
          subject: '前端',
          subjectID: 4,
          tags: 'css3,bfc',
          videoURL: 'https://v-cdn.zjol.com.cn/277004.mp4'
        }
        // {
        //   addDate: "2020-04-24T10:58:26.000Z",
        //   answer: "<p><span style=\"color: rgb(94, 109, 130);\">用于布局的容器组件，方便快速搭建页面的基本结构：</span></p>",
        //   catalog: "js基础",
        //   catalogID: 6,
        //   city: "石景山区",
        //   creator: "超级管理员",
        //   creatorID: 2,
        //   difficulty: "3",
        //   direction: "企业服务",
        //   enterprise: "用友",
        //   enterpriseID: 18,
        //   id: 21,
        //   number: "ck9e30eda0003v4o52n5r5q0h",
        //   question: "<p>下列声明变量的语句不正确的是？</p>",
        //   questionType: "1",
        //   remarks: "用于布局的容器组件，方便快速搭建页面的基本结构：",
        //   subject: "前端",
        //   subjectID: 4,
        //   tags: "用于布局的容器组件，方便快速搭建页面的基本结构：",
        //   videoURL: "https://v-cdn.zjol.com.cn/277004.mp4"
        // },
        // {
        //   addDate: "2020-04-24T10:37:10.000Z",
        //   answer: "<p>当设置过定位后z-index代表层级。</p>",
        //   catalog: "css基础",
        //   catalogID: 5,
        //   city: "西城区",
        //   creator: "超级管理员",
        //   creatorID: 2,
        //   difficulty: "1",
        //   direction: "互联网",
        //   enterprise: "字节跳动",
        //   enterpriseID: 13,
        //   id: 18,
        //   number: "ck9e291ai0000v4o55apl1xs7",
        //   question: "<p>z-index的作用是什么？</p>",
        //   questionType: "1",
        //   remarks: "样式属性",
        //   subject: "前端",
        //   subjectID: 4,
        //   tags: "css属性",
        //   videoURL: "https://v-cdn.zjol.com.cn/277004.mp4"
        // }
      ],
      // 录入人列表
      usersList: [],
      // 省份列表
      provinceList: [],
      // 城市列表
      cityList: [],
      // 试题类型
      questionType,
      // 难度
      difficulty,
      // 方向
      direction,
      // 弹窗显示
      dialogVisible: false,
      // 试题详情
      questionId: null
    }
  },
  created () {
    this.getSimpleSubjects()
    this.provinceList = provinces()
    this.searchFn()
  },
  methods: {
    // 获取简单学科列表
    async getSimpleSubjects () {
      const res = await simple()
      // console.log(res)
      this.subjectList = res.data
      const usersRes = await getUsers()
      // console.log(usersRes)
      this.usersList = usersRes.data
    },
    async chooseSubject (a) {
      const res = await subjectTwoLevel({ subjectID: this.query.subjectID })
      // console.log(res)
      this.twoLevelList = res.data
      const tagRes = await subjectTag({ subjectID: this.query.subjectID })
      // console.log(tagRes)
      this.tagList = tagRes.data
    },
    selectCity () {
      const city = citys(this.query.province)
      //  console.log(city);
      this.cityList = city
    },
    // 页面条数改变时
    handleSizeChange (newSize) {
    // console.log(a);
      this.query.pagesize = newSize
      this.query.page = 1
      this.searchFn()
    },
    // 当前页面改变时
    handleCurrentChange (newPage) {
    // console.log(b);
      this.query.page = newPage
      this.searchFn()
    },
    // 重置表单
    resetForm () {
      this.query = {
        subjectID: null,
        keyword: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null,
        remarks: null,
        shortName: null,
        province: null,
        city: null,
        catalogID: null,
        tags: null,
        page: 1,
        pagesize: 10
      }
      // this.$refs.form.resetFields()
    },
    // 搜索试题
    async searchFn () {
      const res = await list(this.query)
      // console.log(res)
      this.total = res.data.counts
      this.tableData = res.data.items
    },
    // 格式化学科数据
    formatterSub (row, column, cellValue, index) {
      const obj = this.subjectList.find(obj => {
        return obj.value === cellValue
      })
      return obj ? obj.label : '未知'
    },
    // 格式化目录
    formatterdiff (row, column, cellValue, index) {
      const obj = difficulty.find(obj => {
        return obj.value == cellValue
      })
      return obj ? obj.label : '未知'
    },
    // 格式化题型
    formatterType (row, column, cellValue, index) {
      const obj = questionType.find(obj => {
        return obj.value == cellValue
      })
      return obj ? obj.label : '未知'
    },
    // 格式化时间
    formatterTime (row, column, cellValue, index) {
      return dayjs(cellValue).format('YYYY-MM-DD hh:mm:ss')
    },
    // 弹窗点击x关闭
    handleClose () {

    },
    // 点击弹窗关闭按钮
    closeFn () {
      // console.log(1)
      this.dialogVisible = false
    },
    // 点击预览试题
    previewFn (id) {
      console.log(id)
      this.dialogVisible = true
      this.questionId = id
    },
    // 点击编辑试题跳转
    editFn (id) {
      const a = { id: id }
      this.$router.push({
        path: 'new',
        query: a
      })
    },
    // 点击删除试题
    async delFn (id) {
      const confirmRes = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // console.log(confirmRes, id)
      if (confirmRes === 'cancel') return this.$message('您取消了删除')
      const res = await remove({ id: id })
      // console.log(res)
      this.$message.success(res.data.success ? '您已删除成功' : '删除失败')
      this.searchFn()
    },
    // 点击加入精选
    async choiceAddFn (id) {
      const confirmRes = await this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).catch(err => err)
      if (confirmRes === 'cancel') return this.$message('您取消了加入')
      const res = await choiceAdd({ id: id, choiceState: 1 })
      console.log(res)
      this.$message.success(res.data.success ? '加入成功' : '加入失败')
      this.searchFn()
      this.$router.push('/questions/choice')
    }
  }

}
</script>

<style scoped >
.top span{
  font-size: 12px;
  color: pink;

}
.top{
  margin-bottom: 10px;
}
.card{
  padding: 0px 10px 0 10px;
}
.btn-form{
  padding: 0px 0px 0px 100px;
}
.table{
  margin-top: 15px;

}
.div-pagination{
  position: relative;
  margin-top: 10px;
  height: 20px;
}
.pagination{
  position: absolute;
  right: 0;
}
.el-table__header{
  width: 100%;
}
</style>
